草庐IT

Foundation 侧边栏

全部标签

jquery - Semantic-UI 在侧边栏打开的情况下从移动设备过渡到平板电脑显示

这是我的html,当屏幕宽度超过630px时,我有一个指向菜单,当屏幕宽度小于时,我有一个带有菜单按钮的边栏>630px:HomeUserPortfolioHomeUserPortfolioContactMenu这是我的CSS:body{margin:0;padding:0;font-family:"helvetica",arial;}#menuDiv{margin:40px40px040px;text-align:center;}#menu:{max-width:1024px;margin:0auto;}#m_btn{display:none;}img{width:100%;heig

html - 如何定位 Foundation Dropdown?

我的登录表单使用Foundation5.4.5下拉菜单,但问题是下拉菜单如下所示:我希望它像打开的那个一样,小块在右边,主体位置也很好这是我的HTML:HasDropdownThisisalinkThisisanotherYetanother 最佳答案 你有两个选择HasDropdown或者ThisisalinkThisisanotherYetanother两者都作为变通方法使用。但是,我明白您的意思:您希望下拉列表显示在链接的底部,但与右边框对齐。如果有人为此提出答案,我将不胜感激,因为基金会网站表明它可以通过某种未记录的方式实现

css - 我们可以将 Foundation 与 HTML5 样板一起使用吗?

我的客户希望我使用Foundation.我习惯了HTML5Boilerplate与960GridSystem.我只是想知道我可以将Foundation与H5BP一起使用吗?感谢您的指导。 最佳答案 如果Foundation可以与Bootstrap进行比较作为类似的框架,然后thisanswerH5BP开发人员可能会有用。要点:是的,你可以 关于css-我们可以将Foundation与HTML5样板一起使用吗?,我们在StackOverflow上找到一个类似的问题:

javascript - 随页面滚动的内容,但位于固定位置的侧边栏内(具有阴影效果)

我正在尝试为边栏开发以下功能。简而言之,Sidebar将具有100%的高度并且将被绝对定位。它里面有内容,应该随页面滚动,而侧边栏是固定的。此外,如果用户可以向下或向上滚动,还有一个阴影效果/响应来显示他。因此,例如,如果有可以向下/向上滚动的内容,则在那里显示阴影,否则不显示阴影。我制作了一个快速模型,希望它能帮助您理解如果滚动页面会发生什么:我制作了一个带有内容和侧边栏的快速jsfidle,这是我目前所能得到的。http://jsfiddle.net/cJGVJ/3/我认为这不能仅通过css和html实现并且跨浏览器工作,因此欢迎使用jQuery解决方案。HTMLCSSbody{b

html - 垂直侧边导航栏 - Angular 4 和 Bootstrap 3

我已经使用npm安装程序在我的angular4元素中安装了bootstrap3。我已经完成了一个基本站点,并且正在尝试获得一个可以切换进出的动态侧边导航栏。我在网上看到了一些示例,但是无论是较新版本的Bootstrap还是与Angular兼容性问题,它们似乎都不起作用。有没有人对我可以在这种情况下使用的导航栏有任何建议?我的app.component.html中的HTML:BrandHomeAboutEventsTeamWorksAboutServicesClientsContactServicesContact 最佳答案 首先你需

html - Zurb Foundation 6 视口(viewport)高度结束时的粘性开关状态 ".is-anchored .is-at-bottom"

尝试创建一个始终固定在网站顶部的菜单。遵循zurb.foundation的文档,但.sticky的行为总是出乎意料。或者也许我没有得到一些明显的信息?请在此处检查重建:http://codepen.io/mister-hansen/pen/wMgrPm如果网站向下滚动,并恰好达到初始视口(viewport)的高度,粘性插件会将元素.sticky从is-stuckis-at-top更改为:.is-anchored.is-at-bottom所以.sticky消失了。谢谢。更新文档的第一部分:foundation.zurb.com/sites/docs/sticky.html解释了所描述的行

html - 您如何使用 zurb foundation 设计表单文件字段的样式?

我正在尝试使用Rails为ZurbFoundation创建一个按钮来上传图片。我试过这个:不幸的是,它不起作用并创建了两个不同的按钮来让您选择图片。有什么我需要专门为文件字段做的吗? 最佳答案 我发现这个资源对设置inputtype="file"的样式很有帮助:http://www.quirksmode.org/dom/inputfile.html这是出了名的困难,但这本质上涉及将实际输入与应用了您的样式的假输入分层。使用以下CSS:div.file-inputs{position:relative;}div.hidden-inpu

html - 在 Bootstrap 中创建响应式导航栏侧边栏 "drawer"?

试图实现这样的目标:https://www.muicss.com/examples/v1/example-layouts/responsive-side-menu/index.html我在网上看到一些使用其他版本的bootstrap的例子,但是他们对css的改动都太大了,这让bootstrap的学习变得更加困难。我想知道在Bootstrap4中这是否可以使用折叠、堆叠药丸、flexbox等工具来完成?这是我可以实现的:https://jsfiddle.net/kL9u6esw/20/我的Jsfiddle缺少什么:react不正确导航栏无法使用粘性类正确滚动即使我设置了类,菜单按钮也不粘

HTML/CSS 全高侧边栏

我发现互联网上有很多关于这个问题的讨论和问题,但是,它们似乎都不符合我的情况,而且解决方案是针对特定情况的。我在页面顶部有一个高度为100px的header元素。我有一个div#sidebar元素向左浮动,宽度为250px,最后一个div#main元素也向左浮动。html、body和div#sidebar的高度为100%。我的目标是让div#sidebar一直延伸到页面底部,无论浏览器大小或内容大小如何。显然,如果内容长于可见页面高度,它应该正常运行并推过页面末尾,引入滚动条。但是,就目前而言,页面高度似乎已计算为100%+100px,即使没有内容会插入div#sidebar下来。到目

javascript - 基础工具提示 `without $(document).foundation();` 和 `modernizr`

我正在尝试初始化基础工具提示而不初始化所有内容(即$(document).foundation()),但我在这个简单的任务中失败了。我想知道(1)如何使用newFoundation.Tooltip而不是(2)我是否需要modernizr因为documentationinfoundationwebsite没有提到modernizr作为要求。我提到了modernizr,因为如果没有该工具提示,将不会显示任何样式或html。谢谢JSBin-->linktotallyusethem!">Hoverme$(document).ready(function(){newFoundation.Tool